<template>
	<view class="u-flex-col" style="height: calc(100% - 0px);">
		<scroll-view scroll-y="true" class="u-flex-1" style="height: calc(100% - 0px);" @scroll="scroll"
			:scroll-top="scrollTop" :scroll-into-view="scrollIntoView">
			<view v-show="addressType">
				<slot></slot>
				<slot name="top"></slot>
			</view>

			<view class="padding bg-white wrap-margin" style="border-radius: 10rpx;">
				<view class="cu-form-group" v-show="false">
					<view class="title">联系人</view>
					<input type="text" placeholder="姓名" v-model="addressData.name"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">手机号</view>
					<input type="number" placeholder="手机号码" maxlength="11" v-model="mobile"></input>
				</view>
				<view class="cu-form-group area u-flex" id="area">
					<view class="title">所在地区</view>
					<view class="u-flex-1">
						<view class="click" @tap="btnClick"></view>
						<input type="text" :value="addressData.formatted_address" placeholder="选择地区" disabled />
					</view>
				</view>
				<view class="cu-form-group align-start u-flex" id="d">
					<view class="title">详细地址</view>
					<!-- 1.1.5升级 -->
					<view class="u-flex u-flex-1 u-rela">
						<textarea maxlength="-1" @input="getInputtips" @focus="focusInputtips"
							@confirm="confirmInputtips" @blur="blurInputtips"
							:placeholder-style="addressData.adcode==''?'color: #bbb':''" :adjust-position="false"
							v-model="addressData.address_full" :disabled="addressData.adcode==''?true:false"
							:placeholder="addressData.adcode==''?'还没有选择地区哦~ 选择地区后完成此项':'支持智能联想，输入小区名试试~'"
							class="value u-flex-1" />

					</view>
				</view>
				<scroll-view scroll-y="true" class="tipsScroll u-border-top" v-show="!addressType">
					<view class="item" v-for="(item,index) in addressList.tips" :key="index" @tap="addressTisp(item)">
						<view>{{item.address}}</view>
						<text>{{item.name}}</text>
					</view>
				</scroll-view>
				<view v-if="addressType">
					<button class="submitArtison" @click="addTask">{{button_text}}</button>
				</view>
				<view style="height: unset;margin-top: 20rpx;" v-if="addressType">
					<checkbox-group :class="checked == 1 ? 'shake-horizontal' : ''" class="auth-clause"
						@change="CheckboxChange">
						<checkbox class="orange" :class="checked == 2 ? 'checked' : ''"
							:checked="checked == 2 ? true : false" value="2" />
						<view style="font-size: 12px;">
							<agreement></agreement>
						</view>
					</checkbox-group>
				</view>
				<view style="margin:65upx 5upx;" v-show="addressType">
					<image :src="flow_chat" style="height: 90upx;" />
				</view>

			</view>
			<view class="detail text-center" style="margin-top:40rpx;width: 750rpx;" v-show="addressType">
				<image :src="detail_img" style="" mode="widthFix" style="width: 100%;">
					<view style="margin-top: 20px;margin-bottom: 30upx;">
						<button class="submitArtison" @click="goTop()">{{button_text}}</button>
					</view>
			</view>

			<slot name="bottom"></slot>





		</scroll-view>
		<wanl-address ref='wanlAddress' @selectAddress="successSelectAddress"></wanl-address>
	</view>
</template>

<script>
	import graceChecker from '@/common/graceChecker';
	export default {
		name: "jmy-find-artison",
		props: {
			button_text: '',
			flow_chat: '',
			address: '',
			detail_img: '',
			worker_type_id: 0,
			worker_type_child_id: 0,
			worker_id: 0,
		},
		data() {
			return {
				// detailist:[
				// 	'https://img.aibbyp.com/wechat/images/artison/top_user.png',
				// 	'https://img.aibbyp.com/wechat/images/artison/z1.png',
				// 	'https://img.aibbyp.com/wechat/images/artison/z2.png',
				// 	'https://img.aibbyp.com/wechat/images/artison/z3.png',
				// 	'https://img.aibbyp.com/wechat/images/artison/z4.png',
				// 	'https://img.aibbyp.com/wechat/images/artison/z5.png',
				// 	'https://img.aibbyp.com/wechat/images/artison/z6.png',
				// 	'https://img.aibbyp.com/wechat/images/artison/z7.png',
				// 	'https://img.aibbyp.com/wechat/images/artison/z8.png',
				// ],
				addressData: {
					name: '',
					mobile: '',
					default: 0, //地区
					country: '', // 国家
					province: '', //省份
					city: '', // 城市
					citycode: '', // 城市代码
					district: '', // 县
					adcode: '', // 地区代码
					formatted_address: '', //详细地区
					//详情
					address: '', //详细地址
					address_name: '', // 地址名称
					address_full: '', // 完整地址名称
					location: '' //经纬度
				},
				addressList: {
					location: '',
					adcode: '',
					tips: {}
				},
				addressType: true,
				checked: 0,
				mobile: '',
				scrollIntoView: '',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				scrollTopM: 0
			};
		},
		methods: {
			btnClick() {
				this.$refs.wanlAddress.show();
			},
			successSelectAddress(address) {
				console.log(address)
				this.addressData.formatted_address = address.formatted_address;
				this.addressData.country = address.country;
				this.addressData.province = address.province;
				this.addressData.city = address.city;
				this.addressData.citycode = address.citycode;
				this.addressData.district = address.district;
				// this.addressData.formatted_address = address.formatted_address
				this.addressData.location = address.location;
				this.addressData.adcode = address.adcode;
				this.addressList.location = address.location;
				this.addressList.adcode = address.adcode;
			},
			//调用高德地图搜索相关地址
			getInputtips(event) {
				let keywords = event.detail.value;
				if (keywords) {
					uni.request({
						url: 'https://restapi.amap.com/v3/assistant/inputtips',
						data: {
							key: this.$wanlshop.config('amapkey'),
							keywords: keywords,
							location: this.addressList.location,
							city: this.addressList.adcode
						},
						success: (res) => {
							let addressList = [];
							if (res.data.status == 0) {
								this.addressList.tips = addressList;
								return
							}
							res.data.tips.forEach(item => {
								if (item.address.length == 0) {
									item.address = '暂未收录地址';
									item.location = '113.294701,22.666562';
								}
								addressList.push(item);
							});
							this.addressList.tips = addressList;
						}
					});
				}
			},
			// 详细地址失去焦点
			blurInputtips(event) {
				this.addressData.address = event.detail.value;
				console.log(this.scrollTop);
				console.log(this.old.scrollTop)
				setTimeout(() => {
					this.addressType = true;
				}, 10);
			},
			// 详细地址已完成
			confirmInputtips(event) {
				this.addressType = true;
			},
			// 详细地址获取焦点
			focusInputtips(event) {
				this.addressType = false;
				// this.scrollTopM = this.old.scrollTop
				console.log(this.scrollTopM)
				// this.scrollIntoView = 'area'
			},
			// 详细地址替换
			addressTisp(data) {
				this.addressData.adcode = data.adcode;
				this.addressData.address = data.address;
				this.addressData.address_name = data.name;
				
				// 1.0.5升级
				if (data.address) {
					this.addressData.address_full = this.addressData.address + this.addressData.address_name;
				}
				this.addressData.location = data.location;
				this.addressType = true;
			},
			CheckboxChange(e) {
				this.checked = e.detail.value;
			},
			addTask() {
				let area = this.addressData.formatted_address;
				let address = this.addressData.address;
				let address_name = this.addressData.address_name;
				
				let readAgreement = this.checked[0];
				if (readAgreement != 2) {
					this.$wanlshop.msg("是否阅读并且同意《好饰商家版用户协议》和《好饰商家版隐私政策》")
					return
				}
				this.$api.post({
					url: '/jmy/worker_type/addTask',
					data: {
						worker_type_id: this.worker_type_id,
						worker_type_child_id: this.worker_type_child_id,
						area: area,
						address: address,
						address_name: address_name,
						mobile: this.mobile,
						worker_id: this.worker_id
					},
					success: (res) => {
						this.$wanlshop.to('/pages/call/success/success?item=预约完成&title=预约')
					},
					fail: res => {
						console.log(res, '-->')
					}
				});
			},
			scroll: function(e) {
				console.log(e.detail.scrollTop)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			}

		}
	}
</script>

<style>
	@import url("../../pages/user/auth/auth.css");

	page {
		background-color: #F7F7F7;
	}

	.submitArtison {
		color: #FFFFFF;
		height: 46px;
		border-radius: 30px;
		opacity: 1;
		background: linear-gradient(179deg, #FFC262 -8%, #FD6B2A 78%);
		box-sizing: border-box;
		border-image: linear-gradient(180deg, #FF9F00 0%, #F95B2A 100%) 2;
		font-family: Source Han Sans;
	}

	.detail {
		padding: 3%;
		background-color: #FFFFFF;
		border-radius: 10px;

	}
</style>


<style lang="scss" scoped>
	.cu-form-group.area {
		position: relative;
	}

	.cu-form-group.area .click {
		position: absolute;
		z-index: 99;
		right: 0;
		left: 0;
		top: 0;
		bottom: 0;
	}


	.cu-form-group {
		border: none;
		padding: 0;

		.title {

			min-width: calc(4em + 15px);
			font-size: 26rpx;

		}

		uni-input,
		.value {
			border-radius: 4px;
			padding-left: 20rpx;
			background: #F5F5F5;
			color: black;
		}

		.value {
			padding: 10rpx 20rpx;
		}

		uni-input {
			height: 80rpx;
		}
	}
	
	.tipsScroll {
		width: 100%;
		height: 500rpx;
	}
	
	.tipsScroll .item {
		margin: 25rpx 0;
	}
	
	.tipsScroll .item view {
		color: #B8B8B8;
		font-size: 22rpx;
	}
	
	.tipsScroll .item text {
		color: #333;
	}
</style>